<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>自定义指令</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				需求：
					1.自定义一个v-upper-text指令，实现和v-text同样的功能，但会把内容变为大写。
					2.自定义一个v-lower-text指令，实现和v-text同样的功能，但会把内容变为小写。
					注意：定义指令的时候不加v-，但是用时必须加v-
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-upper-text="msg">123</h2>
			<h2 v-lower-text="msg">123</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		//全局注册指令
		Vue.directive('lowerText',function(element,directiveObj){
			element.innerText += directiveObj.value.toLowerCase()
		})

		new Vue({
			el:'#root',
			data:{
				msg:'AtGuIgU'
			},
			//局部注册指令
			directives:{
				//定义一个v-daxie指令，只要有人是用v-daxie指令，就会引起daxie函数的调用
				'upper-text'(element,directiveObj){
					element.innerText += directiveObj.value.toUpperCase()
				}
			}
		})

	</script>
</html>